<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}主机列表{% endblock %}

{% block page_content %}

<!-- 监控数据 -->
<div class="card mt10">
    <h5 class="card-header">
        <a href="/host/cmcd" class="btn btn-sm btn-primary right" type="button">添加主机</a>
    </h5>
    <div class="card-body">
        <table class="table">
            <thead>
            <tr>
                <th>编码</th>
                <th>主机名</th>
                <th>SSH端口</th>
                <th>用户名</th>
                <th>服务</th>
                <th>创建时间</th>
                <th>节点操作</th>
            </tr>
            </thead>
            <tbody>
            {% for host in hosts %}
            <tr>
                <td>{{host.id}}</td>
                <td>{{host.hostname}}</td>
                <td>{{host.ssh_port}}</td>
                <td>{{host.username}}</td>
                <td>{{host.server}}</td>
                <td>{{host.create_time}}</td>
                <td>
                    <a class="btn btn-link btn-xs btn-xs-custom"
                       href="{{ url_for('host_view.create_modfiy_copy_delete', host_id=host.id, method='PUT') }}"
                       data-toggle="tooltip" data-placement="top" title="修改主机"
                       style="text-decoration:none; color:Mediumslateblue;">
                        <span class="fa-stack">
                          <i class="fas fa-square fa-stack-2x"></i>
                          <i class="fas fa-edit fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a class="btn btn-link btn-xs btn-xs-custom"
                       href="{{ url_for('host_view.create_modfiy_copy_delete', host_id=host.id, type='') }}"
                       data-toggle="tooltip" data-placement="top" title="复制主机"
                       style="text-decoration:none; color:Dodgerblue;">
                        <span class="fa-stack">
                          <i class="fas fa-square fa-stack-2x"></i>
                          <i class="fas fa-copy fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a class="btn btn-link btn-xs btn-xs-custom"
                       href="{{ url_for('host_view.delete', host_id=host.id) }}" data-toggle="tooltip"
                       data-placement="top" title="删除主机" style="text-decoration:none; color:Tomato;">
                        <span class="fa-stack">
                          <i class="fas fa-square fa-stack-2x"></i>
                          <i class="fas fa-trash-alt fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <div class="btn-group" data-toggle="tooltip" data-placement="top" title="更多设置">
                        <a class="btn btn-link btn-xs btn-xs-custom" data-toggle="dropdown">
                            <span class="fa-stack">
                                <i class="fas fa-square fa-stack-2x"></i>
                                <i class="fas fa fa-cog fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="{{ url_for('host_view.info', host_id=host.id) }}" target="_blank">
                                    <span class="fa-stack">
                                      <i class="fas fa-square fa-stack-2x"></i>
                                      <i class="fas fa fa-info fa-stack-1x fa-inverse"></i>
                                    </span> 详情
                                </a>
                            </li>
                            <li>
                                <a href="{{ url_for('chart_view.report', host_id=host.id) }}" target="_blank"
                                   data-toggle="tooltip" data-placement="top" title="监控报表"
                                   style="text-decoration:none; color: #17a2b8;">
                                    <span class="fa-stack">
                                      <i class="fas fa-square fa-stack-2x"></i>
                                      <i class="fas fa fa-chart-line fa-stack-1x fa-inverse"></i>
                                    </span> 监控报表
                                </a>
                            </li>
                            <li>
                                <a href="{{ url_for('terminal_view.index', host_id=host.id) }}" target="_blank"
                                   data-toggle="tooltip" data-placement="top"
                                   title="连接终端" style="text-decoration:none; color:black;">
                                    <span class="fa-stack">
                                      <i class="fas fa-square fa-stack-2x"></i>
                                      <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
                                    </span> 连接终端
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{#<p>{{ moment(current_time).format('LLL') }}</p>#}
{#<p>{{ moment(current_time).fromNow(refresh=True) }}</p>#}

{% endblock %}
